import React from "react";
import { MainLayout } from "../../components";
import { Typography } from "antd";
import { useLocation } from "react-router-dom";
const Index = () => {
  const location = useLocation();
  const _ = location.state;
  return (
    <MainLayout>
      <div className="list-item">
        <dl>
          <dt>
            <img src={_.src} width={300} height={200} />
          </dt>
          <dd style={{ marginLeft: 10 }}>
            <h2>{_.title}</h2>
            <Typography.Paragraph ellipsis={{ rows: 4 }}>
              {_.content}
            </Typography.Paragraph>
            <div>
              <img
                src={_.avator}
                alt=""
                style={{ borderRadius: "50%" }}
                width={40}
                height={40}
              />
              <span>{_.auther}</span>
            </div>
          </dd>
        </dl>
      </div>
      <div dangerouslySetInnerHTML={{ __html: _.html }}></div>
    </MainLayout>
  );
};

export default Index;
